<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="Tools Konverter Pre Code Oleh Yanuar Aldi Allesandro" name="description">
<title>Tools Konverter Kode</title>
<style type="text/css">
* {
margin:0;
padding:0;
outline:0;
}
body {
background-color:#fff;
padding:20px;
font-size:12px;
font-family:"Open Sans";
color:#2493C4;
}
p {margin-top:20px;}
code {color:#aa2;}
#codes {
border:none;
width:98%;
height:200px;
margin:10px auto 10px;
display:block;
background-color:#000;
padding:5px;
font-size:14px;
font-family:Consolas, "Courier New", monospace;
}
.a-group {
margin:0px auto 0px;
text-align:center;
}
a {
text-decoration:none;
position:relative;
width:auto;
font-family:"Open Sans";
font-weight:normal;
line-height:normal;
color:#fff!important;
text-align:center;
border-radius:5px;
padding:8px 18px;
cursor:pointer;
margin:10px 8px 10px 0;
font-size:15px;
display:inline-block;
transition:all 0.5s ease-out;
}
a.convrt {background:#3498db;}
a.del {background:#e74c3c;}
a.options {background:#1abc9c;}
a.noscript {background:#95a5a6;}
a.selectall {background:#9b59b6;}
a.convrt:hover {background:#2980b9;}
a.del:hover {background:#c0392b;}
a.options:hover {background:#16a085;}
a.noscript:hover {background:#7f8c8d;}
a.selectall:hover {background:#8e44ad;}
a.convrt:before {content:"\f079"}
a.del:before {content:"\f00d"}
a.options:before {content:"\f085"}
a.noscript:before {content:"\f119"}
a.selectall:before {content:"\f0c5"}
a.convrt:before,
a.del:before,
a.options:before,
a.noscript:before,
a.selectall:before {
font-family:"FontAwesome";
font-weight:normal;
font-style:normal;
vertical-align:middle;
margin:0 8px 0 -6px;
font-size:15px;
color:#fff;
}
#opt1,
#opt2,
#opt3,
#opt4,
#opt5 {
display:inline-block;
margin:0px 10px 0px 0px;
vertical-align:middle;
border:none;
outline:none;
}
textarea {
color:#fff;
word-wrap:break-word;
white-space:pre-wrap;
}
textarea::selection {
background:#e74c3c;
color:#fff;
}
textarea::-moz-selection {
background:#e74c3c;
color:#fff;
}
#box-options {
padding:10px;
margin:0 auto;
display:none;
width:400px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<textarea spellcheck="false" id="codes" autofocus="true" placeholder="Ketik/tempel kode tanpa &lt;pre&gt;...&lt;/pre&gt; lalu klik 'Konversi'"></textarea>
<div class="a-group">
<a class="convrt" id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</a>
<a class="del" onclick="cdClear();">Bersihkan</a>
<a class="selectall">Pilih Semua</a>
<a class="options">Pilihan</a>
<noscript>
<a class="noscript">Aktifkan Javascript !</a>
</noscript>
</div>
<div id="box-options">
<p>
<strong>Pilihan</strong> <span class="soptionsh" style="color:#000;cursor:pointer;text-decoration:underline;">[Sembunyikan]</span><br />
<input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code><br />
<input checked="true" id="opt2" type="checkbox" />Konversi <code>&#39;</code> menjadi <code>&amp;#39;</code><br />
<input checked="true" id="opt3" type="checkbox" />Konversi <code>&quot;</code> menjadi <code>&amp;quot;</code><br />
<input checked="true" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code><br />
<input checked="true" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code>
</p>
</div>
<p style="color:#000;text-align:center;">Konverter Kode Oleh Aldi Allesandro | Spesial Thanks To Rama Adhitya</p>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/'/g, "&#39;");
    if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt4.checked) cv = cv.replace(/</g, "&lt;");
    if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
    if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
        cv = cv.replace(/^/, "<pre clas='prettyprint'>");
    } else {
        cv = cv.replace(/^/, "<pre class='prettyprint'>");
    }
    cv = cv.replace(/$/, "</pre>");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>
<script type="text/javascript">
$(function() {
    $(".options").click(function(e) {
        e.preventDefault;
        $("#box-options").slideDown(400);
    });
    $(".soptionsh").click(function() {
        $("#box-options").slideUp(400);
    });
    $(".selectall").click(function(e) {
        e.preventDefault();
        $("#codes").select();
    });
});
</script>
</body>
</html>